<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('stock:warehouseWm:add')">新增仓库</button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">名称</label>
                <div class="common-search-conrol">
                    <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.name">
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">类型</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.type">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="1" nzLabel="虚拟仓"></nz-option>
                        <nz-option nzValue="2" nzLabel="配件仓"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableLoading" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="backList()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
            >
            <thead>
                <tr>
                    <th nzAlign="center">ID</th>
                    <th nzAlign="center">仓库名称</th>
                    <th nzAlign="center">仓库类型</th>
                    <th nzAlign="center">地址</th>
                    <th nzAlign="center">联系人</th>
                    <th nzAlign="center">联系手机</th>
                    <th nzAlign="center">创建时间</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center" nzWidth="270px">操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <td nzAlign="center">{{data.id}}</td>
                    <td nzAlign="center">{{data.name ? data.name : '-'}}</td>
                    <td nzAlign="center">{{data.type == 1 ? '虚拟仓' : data.type == 2 ? '配件仓' : '-'}}</td>
                    <td nzAlign="center">{{data.address ? data.address : '-'}}</td>
                    <td nzAlign="center">{{data.contacts ? data.contacts : '-'}}</td>
                    <td nzAlign="center">{{data.phoneNumber ? data.phoneNumber : '-'}}</td>
                    <td nzAlign="center">{{data.createTime ? data.createTime : '-'}}</td>
                    <td nzAlign="center" class="{{data.state == 1 ? 'font_Green' : data.state == 0 ? 'font_red' : ''}}">{{data.stateText}}</td>
                    <td nzAlign="center">
                        <a nz-button nzType="link" (click)="showModal(data.id)" *ngIf="permission.userPermission.has('stock:warehouseWm:edit')">编辑</a>
                        <a nz-button nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?"
                            [nzIcon]="iconTpl" (nzOnConfirm)="confirm(data.id)" *ngIf="permission.userPermission.has('stock:warehouseWm:delete')">删除</a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<nz-modal [(nzVisible)]="isVisible" nzTitle="仓库信息" (nzOnCancel)="handleCancel()" [nzStyle]="{ width: '600px' }">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
            <nz-form-item>
                <nz-form-label [nzSm]="4" nzRequired nzFor="name">
                    名称
                </nz-form-label>
                <nz-form-control nzFlex="400px">
                    <input type="text" nz-input formControlName="name" [maxlength]="10" id="name" autocomplete="off">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="4">
                    仓库类型
                </nz-form-label>
                <nz-form-control nzFlex="400px">
                    <nz-select nzPlaceHolder="请选择" nzShowSearch formControlName="type">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="1" nzLabel="虚拟仓"></nz-option>
                        <nz-option nzValue="2" nzLabel="配件仓"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="4">
                    联系人
                </nz-form-label>
                <nz-form-control nzFlex="400px">
                    <input type="text" nz-input [maxlength]="20" formControlName="contacts">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="4">
                    联系方式
                </nz-form-label>
                <nz-form-control nzFlex="400px">
                    <input type="text" nz-input [maxlength]="20" formControlName="phoneNumber">
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="4">
                    详细地址
                </nz-form-label>
                <nz-form-control nzFlex="400px">
                    <input type="text" nz-input placeholder="请输入详细地址" [maxlength]="50" formControlName="address">
                </nz-form-control>
            </nz-form-item>
    
            <nz-form-item>
                <nz-form-label [nzSm]="4">状态</nz-form-label>
                <nz-form-control nzFlex="400px">
                    <nz-radio-group formControlName="state">
                        <label nz-radio nzValue="1">启用</label>
                        <label nz-radio nzValue="0">禁用</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>
    
            <nz-form-item>
                <nz-form-control [nzOffset]="9">
                    <button nz-button nzType="primary">确定</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>
